<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ccc</title>
</head>
<body>
<!--需求 1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。
隐藏域，自我评价（多行文本域）。重置，提交。-->
<!--
form 标签就是表单
input type=text 是文件输入框 value 设置默认显示内容
input type=password 是密码输入框 value 设置默认显示内容
input type=radio 是单选框 name 属性可以对其进行分组 checked="checked"表示默认选中input type=checkbox 是复选框 checked="checked"表示默认选中
input type=reset 是重置按钮 value 属性修改按钮上的文本
input type=submit 是提交按钮 value 属性修改按钮上的文本
input type=button 是按钮 value 属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的
时候同时发送给服务器）
select 标签是下拉列表框
option 标签是下拉列表框中的选项 selected="selected"设置默认选中
textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度
-->
<form>
  用户名称：<input type="text" value="默认值"/><br/>
  用户密码：<input type="password" value="abc"/><br/>
  确认密码：<input type="password" value="abc"/><br/>
  性别：<input type="radio" name="sex"/>男<input type="radio" name="sex" checked="checked" />女<br/>
  兴趣爱好：<input type="checkbox" checked="checked" />Java<input type="checkbox" />JavaScript<input
        type="checkbox" />C++<br/>
  国籍：<select>
  <option>--请选择国籍--</option>
  <option selected="selected">中国</option>
  <option>美国</option>
  <option>小日本</option>
</select><br/>
  自我评价：<textarea rows="10" cols="20">我才是默认值</textarea><br/>
  <input type="reset" value="abc" />
  <input type="submit" value="sdsd"/>
</form>



<form>
  <h1 align="center">用户注册</h1>
  <table align="center">
    <tr>
      <td> 用户名称：</td>
      <td>
        <input type="text" value="默认值"/>
      </td>
    </tr>
    <tr><td> 用户密码：</td>
      <td><input type="password" value="abc"/></td>
    </tr>
    <tr>
      <td>确认密码：</td>
      <td><input type="password" value="abc"/></td>
    </tr>
    <tr>
      <td>性别：</td>
      <td>
        <input type="radio" name="sex"/>男
        <input type="radio" name="sex" checked="checked" />女
      </td>
    </tr>
    <tr>
      <td> 兴趣爱好：</td>
      <td>
        <input type="checkbox" checked="checked" />Java
        <input type="checkbox" />JavaScript
        <input type="checkbox" />C++
      </td>
    </tr>
    <tr>
      <td>国籍：</td>
      <td>
        <select>
          <option>--请选择国籍--</option>
          <option selected="selected">中国</option>
          <option>美国</option>
          <option>小日本</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>自我评价：</td>
      <td><textarea rows="10" cols="20">我才是默认值</textarea></td>
    </tr>
    <tr>
      <td><input type="reset" /></td>
      <td align="center"><input type="submit"/></td>
    </tr>
  </table>
</form>


<!--
form 标签是表单标签
action 属性设置提交的服务器地址
method 属性设置提交的方式 GET(默认值)或 POST
表单提交的时候，数据没有发送给服务器的三种情况：
1、表单项没有 name 属性值
2、单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器
3、表单项不在提交的 form 标签中
GET 请求的特点是：
1、浏览器地址栏中的地址是：action 属性[+?+请求参数]
请求参数的格式是：name=value&name=value
2、不安全
3、它有数据长度的限制
POST 请求的特点是：
1、浏览器地址栏中只有 action 属性值
2、相对于 GET 请求要安全
3、理论上没有数据长度的限制
-->
<form action="http://localhost:8080" method="post">
  <input type="hidden" name="action" value="login" />
  <h1 align="center">用户注册</h1>
  <table align="center">
    <tr>
      <td> 用户名称：</td>
      <td>
        <input type="text" name="username" value="默认值"/>
      </td>
    </tr>
    <tr>
      <td> 用户密码：</td>
      <td><input type="password" name="password" value="abc"/></td>
    </tr>
    <tr>
      <td>性别：</td>
      <td>
        <input type="radio" name="sex" value="boy"/>男
        <input type="radio" name="sex" checked="checked" value="girl" />女
      </td>
    </tr>
    <tr>
      <td> 兴趣爱好：</td>
      <td><input name="hobby" type="checkbox" checked="checked" value="java"/>Java
        <input name="hobby" type="checkbox" value="js"/>JavaScript
        <input name="hobby" type="checkbox" value="cpp"/>C++
      </td>
    </tr>
    <tr>
      <td>国籍：</td>
      <td>
        <select name="country">
          <option value="none">--请选择国籍--</option>
          <option value="cn" selected="selected">中国</option>
          <option value="usa">美国</option>
          <option value="jp">小日本</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>自我评价：</td>
      <td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea></td>
    </tr>
    <tr>
      <td><input type="reset" /></td>
      <td align="center"><input type="submit"/></td>
    </tr>
  </table>
</form>


<!--需求 1：div、span、p 标签的演示
div 标签 默认独占一行
span 标签 它的长度是封装数据的长度
p 段落标签 默认会在段落的上方或下方各空出一行来（如果已有就不再空）
-->
<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>
<p>p 段落标签 1</p>
<p>p 段落标签 2</p>
</body>
</html>